<template>
  <ToolbarItemContainer ref="container" :iconFile="tagIcon" title="标签" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'" @click="openDialog">
  </ToolbarItemContainer>
  <el-dialog v-model="dialogVisible" title="设置标签" width="500" :close-on-click-modal="false">
    <el-select v-model="tagSelected" multiple placeholder="请选择标签" style="width: 100%">
      <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id"
        style="padding-left: 20px;" />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTag">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import TUIChatEngine, {
  TUIStore,
  StoreName,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import { ref, onMounted } from '../../../../adapter-vue';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import tagIconLight from '../../../../assets/icon/tag-light.svg';
import tagIconDark from '../../../../assets/icon/tag-dark.svg';
import { isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
import { Chat } from '@/main';
import { getTagList, addTag, getGroupTag } from '@/api';

const tagIcon = TUIChatConfig.getTheme() === 'dark' ? tagIconDark : tagIconLight;

const container = ref();
const currentConversation = ref<IConversationModel>();
const dialogVisible = ref(false);
const tagList = ref([]);
const tagSelected = ref([]);

onMounted(() => {
  getTagList().then((res) => {
    tagList.value = res.data;
  });
});

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

function openDialog() {
  tagSelected.value = [];
  const value = currentConversation.value.groupProfile.groupCustomField[0].value;
  let tags = [];
  if (value) {
    tags = JSON.parse(currentConversation.value.groupProfile.groupCustomField[0].value);
  }
  if(tags && tags.length > 0) {
    tags.forEach((tag:string) => {
      tagList.value.forEach((item:any) => {
        if (tag.name == item.name) {
          tagSelected.value.push(item.id)
        }
      })
    })
    console.log(tagSelected.value)
  }
  dialogVisible.value = true;
}

function handleTag(){
  if (tagSelected.value.length == 0) {
    return ElMessage.error('请选择标签');
  }
  dialogVisible.value = false;
  let tagNameArr = [];
  tagSelected.value.forEach((id: number, index: number) => {
    tagList.value.forEach((item: any) => {
      if(item.id == id) {
        tagNameArr.push(item)
      }
    })
  })

  //设置群资料自定义字段
  let promise = Chat.updateGroupProfile({
    groupID: currentConversation.value.groupProfile.groupID,
    groupCustomField: [{ key: 'note', value: JSON.stringify(tagNameArr) }]
  });
  promise.then(function (imResponse) {
    // console.log(imResponse.data.group) // 修改成功后的群组详细资料
  }).catch(function (imError) {
    console.warn('updateGroupProfile error:', imError); // 修改群组资料失败的相关信息
  });
  topConversation(currentConversation.value.conversationID)
  addTag({
    GroupId: currentConversation.value.groupProfile.groupID,
    note_id: tagSelected.value.toString()
  })
}

function topConversation(conversationID: string) {
  let promise = Chat.pinConversation({ conversationID: conversationID, isPinned: true });
  promise.then(function (imResponse) {
  }).catch(function (imError) {
    console.warn('pinConversation error:', imError); // 置顶会话失败的相关信息
  });
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
